<template>
  <div class="app">
    <!-- 头部 -->
    <header>
      <div class="container">
        <h1>专栏</h1>
        <nav>
          <ul>
            <!-- 不采用哈希检测 -->
            <li><span @click="special_nav_to('index')" >首页</span></li>
            <li><span @click="special_nav_to('community_render_search_text')">搜索</span></li>
            <li><span @click="special_nav_to('life')">关于我</span></li>
            <li><span @click="special_nav_to('myadmin')">管理</span></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content">
      <!-- 左侧：标签 -->
      <aside class="tags-sidebar">
        <h2>分类</h2>
        <ul>
          <li v-for="tag in tags" :key="tag.id">
            <a @click="tag_nav_to(tag.link)" >
              <span class="tag-icon"><Icon type="ios-leaf-outline" /></span>
              {{ tag.name }}
            </a>
          </li>
        </ul>
      </aside>

      <!-- 右侧：精选文章 -->
      <section class="articles-section">
        <div   v-for="(item,index) in textdata" >
          <!-- 避免再组件上show优先for -->
          <RENDER_PART   v-show="item.kind==activeSection"  :key="index" 
          @load-more="handle_load_moreText(item.kind,item.issitf)"
          :featuredArticles="item.data" style="width: 1280px;"  :issift="item.issitf"  :title="item.title"
          />
        </div>
      </section>
    </main>
</div>
</template>

<script setup>
// 不采取分组
import { ref, reactive, onMounted ,nextTick,inject} from 'vue';
import { useRouter } from 'vue-router';
import RENDER_PART from "./common/renderpart.vue"
import { get_text } from '@/api/community/main.js';
import { customDivision } from '@/static/js/number/division.js';
import { noreapeat_array_byId } from '@/static/js/array/concat_two_norepeat';
const isLoading = ref(false) 
let textdata = reactive([
  {
    kind: 'reading',
    data: [],
    issitf: '0',
    title: '阅读文章'
  },
  {
    kind: 'design',
    data: [],
    issitf: '0',
    title: '设计文章'

  },
  {
    kind: 'sift',
    data: [],
    issitf: '1',
    title: '精选文章'
  },
  {
    kind: 'hot',
    data: [],
    issitf: '0',
    title: '热点文章'
  }, {
    kind: "life",
    data: [],
    issitf: '0',
    title: '生活文章'
  }, {
    kind: "tech",
    data: [],
    issitf: '0',
    title: '技术文章'
  }, {
    kind: "travel",
    data: [],
    issitf: '0',
    title: '旅行文章'
  }, {
    kind: "food",
    data: [],
    issitf: '0',
    title: '美食文章'
  }
])

let activeSection = ref('sift')

let communitystore= inject('community')()
let Router = useRouter();
let show_global_button = inject("global_button")


// 实际不采用link采用视图
const tags = ref([
  { id: 1, name: '技术', link: 'tech' },
  { id: 2, name: '精选', link: 'sift' },
  { id: 3, name: '生活', link: 'life' },
  { id: 4, name: '旅行', link: 'travel' },
  { id: 5, name: '美食', link: 'food' },
  { id: 6, name: '热点', link: 'hot' },
  { id: 7, name: '设计', link: 'design' },
  { id: 8, name: '阅读', link: 'reading' },

  // 更多标签
]);
// 左侧文章导航
const tag_nav_to = async (value) =>{ 
  activeSection.value = value
  if (communitystore.value.get_text_data(value) == undefined ||
    communitystore.value.get_text_data(value).length == 0) {
    const data = await get_text({ kind: value, limit: 1, visibility: "all", issift: 0, })
    communitystore.value.set_text_data(value, data)
    textdata.forEach((element, index) => {
        if (element.kind === value) {
          const newdata = noreapeat_array_byId(element.data, data, 'id')
          // 创建新对象并替换原对象
          // console.log(newdata)
          textdata[index] = {
            ...element,
            data: [...newdata]
          }
        }
      })

  }
}


// 头部导航栏
const special_nav_to = function (section) { 
  if (show_global_button.value) {
          Router.push({ name: `${section}` });
      } else {
          const route = Router.resolve({ name: `${section}` });
          window.open(route.href, '_blank');
    }
}
// 处理更多数据加载
const handle_load_moreText = async (value,issift) => { 
  // 这个10是源于后端)
  if (isLoading.value ) { 
   return 
  }
  isLoading.value = true
  console.log(customDivision(communitystore.value.get_text_data(value).length, 10))
  const data = await get_text(
      {   kind: value,
          limit:customDivision(communitystore.value.get_text_data(value).length, 10),
          visibility:'all',
          issift:issift
        }
      )  
      textdata.forEach((element, index) => {
        if (element.kind === value) {
          const newdata = noreapeat_array_byId(element.data, data, 'id')
          // 创建新对象并替换原对象
          // console.log(newdata)
          textdata[index] = {
            ...element,
            data: [...newdata]
          }
        }
      })
        
      isLoading.value=false
}


onMounted(async () => {
  // 处理首页默认的文章信息
  if (communitystore.value.get_text_data(activeSection.value) == undefined ||
    communitystore.value.get_text_data(activeSection.value).length == 0) {
    const data = await get_text({
                      kind: 'sift',  
                      limit: 1,
                      visibility:'all',  
                      issift: 1        
                    })
    communitystore.value.set_text_data(activeSection.value, data)
    // console.log(data)
    textdata.forEach(element => {
      if (element.kind == activeSection.value) {
          // console.log(element.data)
          // element.data = reactive(data)
          element.data = [...data] 
          // console.log(element.data)
          
      }
      })
  }

})

</script>

<style scoped>
/* 基本样式 */
.app {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  min-height: 100vh;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 头部样式 */
header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header h1 {
  margin: 0;
  font-size: 2.5em;
  font-weight: 700;
}

header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

header nav ul li {
  margin-left: 20px;
}

header nav ul li span{
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: 18px;
}

header nav ul li span:hover {
  color: #ffdd57;
}

/* 主体内容 */
.main-content {
  display: flex;
  gap: 20px;
}

.tags-sidebar {
  position: fixed;
  top: 150px;
  left: 20px;
  width: 200px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.articles-section {
  margin-left: 240px;
  height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none; 
}

.articles-section::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tags-sidebar h2 {
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #444;
}

.tags-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-sidebar ul li {
  margin-bottom: 10px;
}

.tags-sidebar ul li a {
  color: #667eea;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.tags-sidebar ul li a:hover {
  color: #764ba2;
}

.tag-icon {
  margin-right: 8px;
  font-size: 1.2em;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .tags-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }

  .articles-section {
    margin-left: 0;
    height: auto;
  }
}
</style>